<!--
 * @Author: byron
 * @Date: 2021-09-29 00:28:26
 * @LastEditTime: 2021-09-29 02:52:39
-->
<template>
    <div class="newsong">
        <span class="fixed-box">{{index}}</span>
        <div class="img-warp">
            <img v-lazy="$utils.genImgURL(img,120)" alt="">

        </div>
        <div class="name">
            <p>{{name}}</p>
        </div>
        <span class="artist">
            <p>{{artist}}</p>
        </span>
        <span class="albumName">
            <p>{{albumName}}</p>
        </span>
        <span class="time">04：18</span>
    </div>
</template>

<script>
    export default {
        components: {},
        props: ['img', 'artist', 'albumName', 'name', 'index'],
        data() {
            return {};
        },
        watch: {},
        computed: {},
        methods: {},
        created() {},
        mounted() {}
    };
</script>
<style lang="scss" scoped>
    $width:70px;
    $height:$width;

    .newsong {
        font-size: 13px;
        @include flex-center;
        justify-content: space-around;
        padding: 6px 6px;
        width: 100%;

        &:hover {
            background-color: var(--playlist-hover-bgcolor);
        }

        .img-warp {
            flex-shrink: 0;
            position: relative;
            height: $width;
            width: $height;
            border-radius: 4px;
            overflow: hidden;

            img {
                @include abs-stretch;
                width: 100%;
                height: 100%;
            }
        }

        .fixed-box {
            flex-shrink: 0;
            @include flex-center;
            width: $width;
            height: $height;

        }

        .name {
            @include flex-center;
            justify-content: start;
            padding: 0px 30px;
            overflow: hidden;
            flex: 1;

            p {
                @include text-ellipsis;
            }
        }

        .artist {
            @include flex-center;
            justify-content: flex-start;
            overflow: hidden;
            flex: 1;

            p {
                @include text-ellipsis;
            }
        }

        .albumName {
            @include text-ellipsis;
            @include flex-center;
            padding: 0px 30px;
            justify-content: flex-start;
            flex: 1;
            overflow: hidden;

            p {
                @include text-ellipsis;
            }
        }

        .time {
            flex-shrink: 0;
            width: 100px;
            height: $height;
            @include flex-center;
        }
    }
</style>